<template>
  <div class="case-progress" id="progress">
    <div class="overflow-box 11" :style="`transform:translateY(-50%);`">

      <div class="progress-item">
        <template v-for="(t, index) in list">
          <div class="progress-box" :key="index" v-if="index < 3" :style="`width:${width}px`">
            <progress-bar type="circle" :color="'rgba(45, 153, 255, 1)'" :percentage="t.ratio * 100" :show-text="false"
              :width="width" />
            <div class="textCenter">
              <div>{{ (t.ratio * 100).toFixed(1) }}%</div>
              <span>{{ t.divisionName }}</span>
            </div>
          </div>
        </template>

      </div>
      <div class="progress-item">
        <template v-for="(t, index) in list">
          <div class="progress-box" :key="index" v-if="index >= 3" :style="`width:${width}px;height:${width}px`">
            <progress-bar type="circle" :color="'rgba(45, 153, 255, 1)'" :percentage="t.ratio * 100" :show-text="false"
              :width="width" />
            <div class="textCenter">
              <div>{{ (t.ratio * 100).toFixed(1) }}%</div>
              <span>{{ t.divisionName }}</span>
            </div>
          </div>
        </template>

      </div>

    </div>
  </div>
</template>

<script>
import progressBar from './progressBar.vue';

export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    progressBar,
  },
  watch: {
    list: {
      handler: function (newVal) {
        const uiList = [];
        for (let i = 0; i < newVal.length - 1; i += 2) {
          uiList.push(newVal.slice(i, i + 2));
        }
        this.uiList = uiList;
      },
      deep: true,
    },
  },
  data() {
    return {
      uiList: [],
      width: document.body.clientWidth > 1366 ? 90 : 80,
      boxScale: 1,
      width: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      const progressBoxWidth = document.querySelector('.overflow-box').offsetWidth;
      this.width = progressBoxWidth * 0.9 / 5;

    });
  },
  methods: {
    format(percentage, item) {
      return `${percentage}% \n ${item.divisionName}`;
    },
  },
};
</script>

<style lang="scss">
.case-progress {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .overflow-box {
    overflow-x: auto;
    position: relative;
    padding: 0 40px;
    top: 50%;
    transform: translateY(-50%);

    &::-webkit-scrollbar {
      display: none;
      /* Chrome, Safari, and Opera */
    }
  }

  .progress-item {
    width: 100%;
    display: inline-flex;
    user-select: none;
    justify-content: space-between;
    &:last-child {
      padding-left: 15%;
    }
    &:first-child {
      padding-right: 15%;
    }
    .progress-box {
      margin-bottom: 4px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .textCenter {
    position: absolute;
    text-align: center;

    div {
      font-size: 20px;
      line-height: 20px;
      color: #fff;
      font-weight: 500;
      margin-bottom: 2px;

      // 媒体查询
      @media screen and (max-width: 1366px) {
        font-size: 16px;
      }

    }

    span {
      font-size: 14px;
      color: #fff;

      // 媒体查询
      @media screen and (max-width: 1366px) {
        font-size: 12px;
      }
    }
  }

  .el-progress path:first-child {
    // 修改进度条背景色
    stroke: #091f33;
  }

  /* .el-progress--circle {
    width: 90px;
    height: 90px;
    .el-progress-circle {
      width: 90px !important;
      height: 90px !important;
    }
  } */
  .el-progress__text {
    // 修改进度条文字提示颜色
    color: #fff;
  }
}
</style>
